<template>
	<view>
		<u-cell-group>
			<block v-for="(item, index) in nowList">
				<u-cell-item @click="collapseChange(index)" :arrow="false" hover-class="none">
					<view slot="icon" class="u-flex">
						<u-image mode="scaleToFill" v-if="pl > 0" class="u-m-b-20 u-m-r-20" :class="pl>1?'u-m-l-20':''" width="32rpx" height="32rpx" src="/pagesB/static/channel/images/table-left.png">
						</u-image>
						<u-image width="100rpx" height="100rpx" :src="item.headimgurl?baseUrl+item.headimgurl:'/static/public/images/headimgurl.jpg'" shape="circle">
						</u-image>
					</view>
					<view slot="title" class="u-p-l-20">
						<view class="name">
							{{item.real_name ? item.real_name : '--'}}
							<u-tag class="u-m-l-10" type="error" :text="item.proxy_name" size="mini" mode="plain" />
						</view>
						<view class="tel">
							手机号:{{item.mobile}}
						</view>
					</view>
					<view slot="right-icon">
						<u-icon :name="item.show==1?'arrow-down':'arrow-right'" class="u-m-r-10"></u-icon>
					</view>
				</u-cell-item>
				<view class="u-m-l-20" v-if="item.show == 1">
					<tempSub :pid="item.user_id" :pl="pl+1" :underUserlist="item.underList"></tempSub>
				</view>
			</block>
			
		</u-cell-group>
	</view>
</template>

<script>
	import tempSub from '@/pagesB/channel/team/tempSub';
	export default {
		components: {
			tempSub
		},
		name: "tempSub",
		props: {
			pid: {
				type: Number,
				default: '0',
			},
			underUserlist: {
				type: Array,
				default:function(){
					return {};
				}
			},
			pl: {
				type: Number,
				default: '0',
			},
		},
		data() {
			return {
				baseUrl: this.config.baseUrl,
				nowList:this.underUserlist,
				plStyle: this.pl > 0 ? 'padding-left:'+(this.pl * 20)+'rpx':''
			}
		},
		methods: {
			collapseChange(index){
				let nowList  = this.nowList[index];
				if (nowList.count < 1){
					return false;
				}
				if (nowList.show == 1){
					nowList.show = 0;
					this.$forceUpdate()
					return false;
				}else{
					nowList.show = 1;
				}
				if (nowList.underList.length > 0){
					this.$forceUpdate()
					return false;
				}
				this.$u.post('channel/api.team/getUnderUserlist',{pid:nowList.user_id}).then(res => {
					nowList.underList = res.data.list;
					this.$forceUpdate()
				})
			}
		}
	}
</script>

<style lang="scss">
	.collapse_item{
		display: block;
		position: relative;
		width: 100%;
		border: 1px solid rgb(230, 230, 230);
		margin-top: 10rpx;
		.title{
			padding-left: 20rpx;
			line-height: 80rpx;
			padding-right: 20rpx;
			color: #000000;
			font-size: 32rpx;
			.count{
				color: #98979a;
				font-size: 28rpx;
				margin-left: 5rpx;
			}
		}
		.proxy_name{
			position: absolute;
			line-height: 30rpx;
			font-size: 26rpx;
			color: $base-color;
			top: 25rpx;
			right: 80rpx;
			border: 1rpx solid $base-color;
			border-radius: 10rpx;
			padding: 2rpx 10rpx;
		}
	}
	
</style>
